<template>
  <div v-if="!appDetail || !appDetail.name">
    <div class="flex items-center justify-center h-screen">
      <div class="text-2xl font-bold">Loading...</div>
    </div>
  </div>
  <!-- 总宽度站屏幕90%，左右留白 -->
  <div v-else class="flex flex-col xl:flex-row gap-10 w-full md:w-[90%] mx-auto">
    <!-- 左侧 -->
    <div class="w-full flex-1">
      <div class="flex items-center justify-between">
        <div class="flex items-center gap-4 relative w-full mt-4 mb-4">
          <img :src="appDetail.icon" alt="app icon" class="w-16 h-16 rounded-lg" loading="lazy">
          <div class="flex flex-col items-start gap-1">
            <div class="text-lg font-bold line-clamp-1">{{ appDetail.name }}</div>
            <div v-if="appDetail.ifChoice" class="text-gray-500 text-xs bg-color text-white rounded-md px-1.5 py-0.5">{{ appDetail.ifChoice ? 'Editor\'s Choice' : '' }}</div>
            <a :href="appDetail.download_url" class="text-blue-500 flex items-center gap-1 text-xs">
              <svg-icon name="code" fill="black" width="16" height="16"></svg-icon>
              {{ appDetail.download_url }}</a>
          </div>
          <!-- 显示在最右侧 -->
          <div class="absolute right-2">
            <svg-icon name="mark" v-if="!favorite.isMarkapp(appDetail)" class="cursor-pointer border border-gray-300 rounded-full p-2" @click="favorite.handleMarkapp(appDetail)"></svg-icon>
            <svg-icon name="mark-black" v-else class="cursor-pointer border border-gray-300 rounded-full p-2" @click="favorite.removeMarkapp(appDetail)"></svg-icon>
          </div>
        </div>
      </div>
      
      <!-- 分类 -->
      <div class="flex gap-3 flex-wrap">
        <a v-for="(item, index) in appDetail.secondCategory" :key="index" class="text-sm text-blue-500">{{ item }}</a>
      </div>
  
      <div class="text-xs mt-4 mb-4" v-html="appDetail.desc || 'No description'"></div>
      <img :src="appDetail.bigIcon" alt="app icon" class="w-full h-auto mb-8" loading="lazy">

      <AdsGoogleAdCollect slot-type="detailDisplay1" />
      
      <!-- 折叠的内容 -->
      <div v-if="isExpanded" class="text-xs mt-4 mb-4" v-html="appDetail.features || 'No features'"></div>
      <div v-if="isExpanded" class="flex items-center justify-center mb-8 mt-8">
        <!-- <a :href="appDetail.download_url" class="bg-[var(--primary-color)] text-center text-white max-w-md w-full px-4 py-2 rounded-full font-bold text-lg">Download Latest APK</a> -->
      </div>
      
      <!-- 未展开时显示的内容（限制高度并添加渐变） -->
      <div v-if="!isExpanded" class="h-[20vh] overflow-y-hidden relative">
        <div class="absolute bottom-0 left-0 right-0 h-[80%] bg-gradient-to-t from-white to-transparent"></div>
        <div class="text-xs mt-4 mb-4" v-html="appDetail.features || 'No features'"></div>
        <!-- <div class="flex items-center justify-center mb-8">
          <a :href="appDetail.download_url" class="bg-[var(--primary-color)] text-center text-white max-w-md w-full px-4 py-2 rounded-full font-bold text-lg">Download Latest APK</a>
        </div> -->
      </div>
      
  
      <!-- 收起按钮linear-gradient(180deg,hsla(0,0%,100%,0),#fff) -->
      <div v-if="!isExpanded" id="btnPlay" class="flex items-center justify-center mb-8">
        <div @click="expandContent" class="flex items-center justify-center max-w-md w-full flex-col bg-[var(--primary-color)] text-white rounded-full py-2 px-4 text-lg font-bold cursor-pointer hover:opacity-90 transition-opacity">
          <div class="flex items-center gap-1">
            <svg-icon name="video" fill="white"></svg-icon>
            <div class="">Watch AD</div>
          </div>
          <div class="">Unlock More</div>
        </div>
      </div>
    </div>

    <!-- 右侧 -->
    <div class="w-full xl:w-[420px]">
      <!-- 屏幕xl时，layout传vertical，否则传horizontal -->
      <BusinessAppList :layout="layout" :appList="relatedApps" :selectedMainCategoryName="category" :selectedSubCategoryName="subCategory" ad-slot="detailDisplay2" />
    </div>
  </div>
</template>

<script setup>
// 使用公共的收藏功能
const favorite = useFavorite()
const { getHomeParams, buildQueryString } = useUrlParams()
// 获取一级分类二级分类和app
const route = useRoute()
const category = route.query.category || ''
const subCategory = route.query.subCategory || ''
const appName = route.query.app || ''

// 控制内容折叠状态的响应式变量
const isExpanded = ref(false)
// 屏幕xl时，layout传vertical，否则传horizontal
const layout = ref('horizontal')
onMounted(() => {
  logEvent('Detail_Page_Show')
  if (window.innerWidth >= 1280) {
    layout.value = 'vertical'
  }
})
// 展开内容的函数
const expandContent = () => {
  isExpanded.value = true
  logEvent('Click_Unlock')
}

// 验证必要参数
if (!category || !subCategory || !appName) {
  throw createError({
    statusCode: 400,
    statusMessage: '缺少必要参数：category、subCategory 或 app'
  })
}

// 获取app详情
const { data: appDetail } = await useFetch(`/api/app/${encodeURIComponent(category)}/${encodeURIComponent(subCategory)}/${encodeURIComponent(appName)}`, {
  transform: (response) => response.data || {}
})

// 获取related apps
const { data: relatedApps } = await useFetch(`/api/category/${encodeURIComponent(category)}/${encodeURIComponent(subCategory)}`, {
  transform: (response) => response.data?.filter((item) => item.name !== appName).slice(0, 6) || []
})

// 生成app下载页url
const getAppDownloadUrl = () => {
  const queryParams = {
    ...getHomeParams(),
    category: category,
    subCategory: subCategory,
    app: appName
  }
  return `/download?${buildQueryString(queryParams)}`
}
</script>

<style scoped lang="scss">
.text-color {
  color: var(--primary-color);
}
.bg-color {
  background-color: var(--primary-color);
}

/* 使用深度选择器来影响v-html渲染的内容 */
:deep(.mark-down-keyword) {
  color: var(--primary-color);
  font-weight: bold;
}

:deep(.question_modelus) {
  .question_item {
    margin-top: 1rem;
    .question_title {
      font-weight: bold;
      font-size: 1.6rem;
      line-height: 1.6;
    }
    .question_content {
      font-size: 1.1rem;
      line-height: 1.6;
    }
    .question_item_list {
      .list_title {
        font-weight: bold;
        font-size: 1.3rem;
        line-height: 1.6;
        margin-top: 0.5rem;
      }
      .list-content {
        font-size: 1.1rem;
        line-height: 1.6;
      }
    }
  }
}
</style>